import React, { Component, Fragment } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Tabs, Select, Input, Card, Table, Tooltip } from 'antd';
import styles from './index.less';
import * as apis from '@/services/SystemMgr';
import Mpagination from '../components/Mpagination';

const { TabPane } = Tabs;
const { Option } = Select;
const { Search } = Input;

export default class DataDictionariess extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      tabsKey: '1',
      total: '0', // 列表的总条数
      current: '1', // 当前页数
      pageSize: '20', // 每页条数
      pages: '0', // 总页数
      search: '',
      typeCode: '',
      columns1: [
        {
          title: '序号',
          dataIndex: 'orderNumber',
          key: 'orderNumber',
          width: 30,
          align: 'center',
        },
        {
          title: '字典名称',
          dataIndex: 'dictionariesName',
          key: 'dictionariesName',
          width: 70,
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '字典编码',
          dataIndex: 'dictionariesCode',
          key: 'dictionariesCode',
          width: 80,
          render: text => (
            <div>
              <Tooltip
                placement="topLeft"
                title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
              >
                <div
                  style={{
                    width: '100%',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            </div>
          ),
        },
        {
          title: '字典值',
          dataIndex: 'dictionariesValue',
          key: 'dictionariesValue',
          width: 80,
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '字典描述',
          dataIndex: 'dictionariesDescribe',
          key: 'dictionariesDescribe',
          width: 80,
          render: text => (
            <div>
              <Tooltip
                placement="topLeft"
                title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
              >
                <div
                  style={{
                    width: '100%',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            </div>
          ),
        },
        {
          title: '字典类型',
          dataIndex: 'dictionariesType',
          key: 'dictionariesType',
          width: 80,
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '类型编码',
          dataIndex: 'TypeCode',
          key: 'TypeCode',
          width: 80,
          render: text => (
            <div>
              <Tooltip
                placement="topLeft"
                title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
              >
                <div
                  style={{
                    width: '100%',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            </div>
          ),
        },
        {
          title: '是否有效',
          dataIndex: 'whetherEffective',
          key: 'whetherEffective',
          width: 80,
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '创建日期',
          dataIndex: 'establishDate',
          key: 'establishDate',
          width: 80,
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '更新日期',
          dataIndex: 'upDate',
          key: 'upDate',
          width: 80,
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: 'orderNumber',
          key: 'orderNumber',
          width: '5%',
          align: 'center',
        },
        {
          title: '字典类型名称',
          dataIndex: 'dictionariesTypeName',
          key: 'dictionariesName',
          width: '11%',
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '字典类型编码',
          dataIndex: 'dictionariesTypeCode',
          key: 'dictionariesCode',
          width: '11%',
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '字典描述',
          dataIndex: 'dictionariesDescribe',
          key: 'dictionariesDescribe',
          render: text => (
            <div>
              <Tooltip
                placement="topLeft"
                title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
              >
                <div
                  style={{
                    width: '100%',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            </div>
          ),
        },
        {
          title: '创建日期',
          dataIndex: 'establishDate',
          key: 'establishDate',
          width: '10%',
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '更新日期',
          dataIndex: 'upDate',
          key: 'upDate',
          width: '10%',
          render: text => (
            <Tooltip
              placement="topLeft"
              title={<div style={{ maxHeight: '140px', overflow: 'auto' }}>{text}</div>}
            >
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
      ],
      data: [],
      selectData: [],
    };
  }

  componentDidMount() {
    this.getDictionaryPageUsingGET();
  }

  // 数据字典
  async getDictionaryPageUsingGET(current = '1', dictName = '', typeCode = '', pageSize = '20') {
    this.setState({ data: [] });
    const params = {
      apiVersion: 'v1',
      current,
      dictName,
      isEnable: '',
      pageSize: `${pageSize}`,
      typeCode,
    };

    const data = await apis.getDictionaryPageUsingGET({ params });
    if (data && data.code === 1) {
      const arr = [];
      data.data.list.forEach((item, index) => {
        const obj = {
          key: index,
          orderNumber: data.data.pageSize * (data.data.current - 1) + index + 1,
          dictionariesName: item.dictName,
          dictionariesCode: item.dictCode,
          dictionariesValue: item.dictValue,
          dictionariesDescribe: item.dictDesc,
          dictionariesType: item.typeName,
          TypeCode: item.typeCode,
          whetherEffective: item.isEnable === '未禁用' ? '有效' : '无效',
          establishDate: item.createStr,
          upDate: item.updateTimeStr,
        };
        arr.push(obj);
      });
      this.setState({
        data: arr,
        total: data.data.total,
        current: data.data.current,
        pageSize: data.data.pageSize,
        pages: data.data.pages,
        loading: false,
      });
    }
  }

  // 字典类型
  async getDictionaryTypePageUsingGET(current = '1', typeName = '', pageSize = '20') {
    this.setState({ data: [] });
    const params = {
      apiVersion: 'v1',
      current,
      typeName,
      pageSize: `${pageSize}`,
    };
    const data = await apis.getDictionaryTypePageUsingGET({ params });
    if (data.code === 1) {
      const arr = [];
      data.data.list.forEach((item, index) => {
        const obj = {
          key: index,
          orderNumber: data.data.pageSize * (data.data.current - 1) + index + 1,
          dictionariesTypeName: item.typeName,
          dictionariesTypeCode: item.typeCode,
          dictionariesDescribe: item.typeDesc,
          establishDate: item.createTimeStr,
          upDate: item.updateTimeStr,
        };
        arr.push(obj);
      });
      this.setState({
        data: arr,
        total: data.data.total,
        current: data.data.current,
        pageSize: data.data.pageSize,
        pages: data.data.pages,
        loading: false,
      });
    }
  }

  // 获取字典下拉数据
  async getDictionaryTypeListUsingGET() {
    const params = {
      apiVersion: 'v1',
    };
    const data = await apis.getDictionaryTypeListUsingGET({ params });
    if (data && data.code === 1) {
      this.setState({
        selectData: data.data,
      });
    }
  }

  // 修改每页参数
  onShowSizeChange = (current, pageSize) => {
    this.handlePaginationChange(current, pageSize);
  };

  // 搜索框
  handleSearchOnchange = value => {
    this.setState({
      search: value,
    });
    if (this.state.tabsKey === '1') {
      this.getDictionaryPageUsingGET('1', value, this.state.typeCode, this.state.pageSize);
    } else if (this.state.tabsKey === '2') {
      this.getDictionaryTypePageUsingGET('1', value, this.state.pageSize);
    }
  };

  // tab切换
  handleTabsOnChange = key => {
    this.setState({
      tabsKey: key,
      total: '0', // 列表的总条数
      current: '1', // 当前页数
      pageSize: '20', // 每页条数
      pages: '0', // 总页数
      search: '',
    });
    if (key === '1') {
      this.getDictionaryPageUsingGET();
    } else if (key === '2') {
      this.getDictionaryTypePageUsingGET();
    }
  };

  // 点击下拉框
  handleFocus = () => {
    this.getDictionaryTypeListUsingGET();
  };

  // 选中下拉框
  handleValueOnChange = value => {
    this.setState({
      typeCode: value,
    });
    this.getDictionaryPageUsingGET('1', this.state.search, value, this.state.pageSize);
  };

  // 分页切换
  handlePaginationChange = (current, pageSize) => {
    this.setState({
      loading: true,
    });
    if (this.state.tabsKey === '1') {
      this.getDictionaryPageUsingGET(current, this.state.search, this.state.typeCode, pageSize);
    } else if (this.state.tabsKey === '2') {
      this.getDictionaryTypePageUsingGET(current, this.state.search, pageSize);
    }
  };

  render() {
    const { columns1, columns2, data } = this.state;
    const tableHeight = document.body.clientHeight - 265;
    const search1 = (
      <Fragment>
        字典类型:&nbsp;&nbsp;
        <Select
          showSearch
          style={{ width: 200 }}
          placeholder="请选择"
          optionFilterProp="children"
          onChange={this.handleValueOnChange}
          onFocus={this.handleFocus}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
        >
          <Option value="" key={0}>
            全部
          </Option>
          {this.state.selectData.map(item => (
            <Option value={item.type_code} key={item.type_code}>
              {item.type_name}
            </Option>
          ))}
        </Select>
        &nbsp;&nbsp;&nbsp;
        <Search
          placeholder="请输入字典名称搜索"
          onSearch={this.handleSearchOnchange}
          style={{ width: 200 }}
        />
      </Fragment>
    );

    const search2 = (
      <Search
        placeholder="请输入字典类型名称搜索"
        onSearch={this.handleSearchOnchange}
        style={{ width: 200 }}
      />
    );

    return (
      <div className={styles['data-dictionaries']}>
        <PageHeaderWrapper breadcrumb={null} title="数据字典">
          <Card>
            <Tabs
              defaultActiveKey="1"
              tabBarExtraContent={this.state.tabsKey === '1' ? search1 : search2}
              onChange={this.handleTabsOnChange}
            >
              <TabPane tab="数据字典" key="1">
                <Table
                  columns={columns1}
                  dataSource={data}
                  bordered
                  size="middle"
                  scroll={{ y: tableHeight }}
                  pagination={false}
                />
              </TabPane>
              <TabPane tab="字典类型" key="2">
                <Table
                  columns={columns2}
                  dataSource={data}
                  bordered
                  size="middle"
                  scroll={{ y: tableHeight }}
                  pagination={false}
                  loading={this.state.loading}
                />
              </TabPane>
            </Tabs>
            <Mpagination
              total={this.state.total}
              pageSize={this.state.pageSize}
              current={this.state.current}
              pages={this.state.pages}
              handlePaginationChange={this.handlePaginationChange}
              onShowSizeChange={(current, pageSize) => this.onShowSizeChange(current, pageSize)}
            />
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}
